import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
export default class TabBar extends Component {
  constructor(props) {
    super(props)
    this.state = {
      nav: [
        { id: 1, path: "/home", text: "首页" },
        { id: 2, path: "/category", text: "分类" },
        { id: 3, path: "/activity", text: "活动" },
        { id: 4, path: "/car", text: "购物车" },
        { id: 5, path: "/user", text: "个人中心" },
      ]
    }
  }

  renderNav = () => {
    const { nav } = this.state
    return nav.map(item => <li key={item.id}> 
      <NavLink to={item.path} > {item.text} </NavLink>
     </li>)
  }
  render() {
    return (
      <div>底部栏
        <ul className='nav'>
          { this.renderNav() }
        </ul>
      </div>
    )
  }
}
